<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>集散中心</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1031373_7dlwku3mymg.css">
  <link rel="stylesheet" href="src/css/visualStyle.css">
</head>

<body>
  <div id="app">
    <div class="swiper-container fullScreen-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <!-- 物流能力展示 -->
          <div class="visual-wrapper">
            <h2 class="visual-big-tit">{{ city }}医药集散中心物流能力展示</h2>
            <div class="visual-container">
              <div class="warehouseOverview-top bg-part">
                <div class="visual-small-tit blue">配送能力展示</div>
                <div class="warehouseOverview-top-c displayflex">
                  <dl v-for="(item, index) in basicAbility">
                    <dt class="iconfont"></dt>
                    <dd>
                      <p>{{ item.name }}</p>
                      <span><b>{{ item.number }}</b> <b v-if="item.number2 !== ''">& {{ item.number2 }}</b></span>
                    </dd>
                  </dl>
                </div>
                <div class="bg-part2"></div>
              </div>
              <div class="warehouseOverview-middle displayflex">
                <div class="warehouseOverview-middle_l warehouseOverview-l bg-part">
                  <div class="visual-small-tit blue">仓储能力展示</div>
                  <div class="warehouse-capacity">
                    <ul>
                      <li>平均订单处理效率：<span class="blue">{{ capacity.OutOrderProcess }}分钟/单</span></li>
                      <li>集散订单周转效率：<span class="blue">{{ capacity.InOrderProcess }}分钟/单</span></li>
                      <li>日出库订单数：<span class="blue">{{ capacity.OutOrderCount }}单</span></li>
                      <li>日入库订单数：<span class="blue">{{ capacity.InOrderCount }}单</span></li>
                      <li>日出库件数：<span class="blue">{{ capacity.OutWholeTotalPKGS }}件</span></li>
                      <li>日入库件数：<span class="blue">{{ capacity.InTotalPKGS }}件</span></li>
                    </ul>
                  </div>
                  <div class="bg-part2"></div>
                </div>
                <div class="warehouseOverview-middle_r warehouseOverview-r bg-part">
                  <div class="visual-small-tit blue">季度平均库容使用情况</div>
                  <div id="stockLine" class="chart-box middle-chart-box"></div>
                  <div class="bg-part2"></div>
                </div>
              </div>
              <div class="warehouseOverview-bottom displayflex">
                <div class="warehouseOverview-bottom-l bg-part">
                  <div class="visual-small-tit blue">仓库总体使用情况</div>
                  <div id="overallUsePie" class="chart-box bottom-chart-box"></div>
                  <p class="overallUsePie-total">总库容：{{((this.overallUsePieData[0].value+this.overallUsePieData[1].value)/10000)}}万件</p>
                  <div class="bg-part2"></div>
                </div>
                <div class="warehouseOverview-bottom-r bg-part">
                  <div class="visual-small-tit blue">仓库存储情况一览</div>
                  <div id="warehouseBar" class="chart-box bottom-chart-box"></div>
                  <div class="bg-part2"></div>
                </div>
              </div>
            </div>
            <!-- <div class="visual-footer">Copyright © 2006-2015 深圳传世般若科技有限公司</div> -->
          </div>
        </div>
        <div class="swiper-slide">
          <!-- 实时物流情况 -->
          <div class="visual-wrapper">
            <h2 class="visual-big-tit">{{ city }}医药集散中心实时物流情况</h2>
            <div class="visual-container displayflex">
              <div class="realtimeLogistics-l">
                <div class="h280 margin-b20 displayflex">
                  <div class="w820 bg-part">
                    <div class="visual-small-tit blue">处理中订单分部一览</div>
                    <div id="ProcessingOrderBar" class="chart-box"></div>
                    <div class="bg-part2"></div>
                  </div>
                  <div class="w540 bg-part">
                    <div class="visual-small-tit blue">配送时长占比</div>
                    <div id="DeliveryTimePie" class="chart-box"></div>
                    <div class="bg-part2"></div>
                  </div>
                </div>
                <div class="h280 margin-b20 displayflex">
                  <div class="w540 bg-part">
                    <div class="visual-small-tit blue">出入库动态一览</div>
                    <div id="InOutDynamicsBar" class="chart-box"></div>
                    <div class="bg-part2"></div>
                  </div>
                  <div class="w820 bg-part">
                    <div class="visual-small-tit blue">吞吐状况一览</div>
                    <div id="HuffConditionLine" class="chart-box"></div>
                    <div class="bg-part2"></div>
                  </div>
                </div>
                <div class="w1380 h280 bg-part">
                  <div class="visual-small-tit blue">异常信息明细</div>

                  <Tabs class="abnormal-item tab-title" :value="tabsnumber" @on-click="getTrunkData">
                    <tab-pane label="全部异常" name="1">
                      <div v-if="allAbnormal.length > 0" class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in allAbnormal" :key="index">
                            <div class="abnormal-row" :class="typeClass(item.type)">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">
                                <span v-if="item.time < 24">【新】</span>
                                {{ item.warehouse }}
                              </p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-else class="no-abnormal-item">
                        <img src="src/images/no-abnormal.png" alt>
                      </div>
                    </tab-pane>
                    <tab-pane label="冷冻仓库异常" icon="ios-disc" name="2">
                      <div class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in freezing" :key="index">
                            <div class="abnormal-row typeClass1" v-if="item.type == '冷冻仓异常'">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </tab-pane>
                    <tab-pane label="冷藏仓库异常" name="3">
                      <div class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in refrigeration" :key="index">
                            <div class="abnormal-row typeClass2" v-if="item.type == '冷藏仓异常'">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </tab-pane>
                    <tab-pane label="温度异常" name="4">
                      <div class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in temperature" :key="index">
                            <div class="abnormal-row typeClass3" v-if="item.type == '在途温度异常'">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </tab-pane>
                    <tab-pane label="阴凉异常" name="5">
                      <div class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in cool" :key="index">
                            <div class="abnormal-row typeClass4" v-if="item.type == '阴凉异常'">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </tab-pane>
                    <tab-pane label="订单异常" name="6">
                      <div class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in order" :key="index">
                            <div class="abnormal-row typeClass5" v-if="item.type == '订单异常'">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </tab-pane>
                    <tab-pane label="设备异常" name="7">
                      <div class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in device" :key="index">
                            <div class="abnormal-row typeClass6" v-if="item.type == '设备异常'">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </tab-pane>
                    <tab-pane label="接口异常" name="8">
                      <div class="swiper-container abnormal-swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" v-for="(item, index) in interface" :key="index">
                            <div class="abnormal-row typeClass7" v-if="item.type == '接口异常'">
                              <p class="abnormal-type">{{ item.type }}</p>
                              <p class="abnormal-warehouse">{{ item.warehouse }}</p>
                              <p class="abnormal-details">{{ item.detail }}</p>
                              <p class="abnormal-time">异常时长：{{ item.time }}h</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </tab-pane>
                  </Tabs>

                  <div class="bg-part2"></div>
                </div>
              </div>
              <div class="realtimeLogistics-r">
                <div class="h280 bg-part margin-b20">
                  <div class="visual-small-tit blue">回单情况</div>
                  <div id="ReturnOrderBar" class="chart-box"></div>
                  <div class="bg-part2"></div>
                </div>
                <div class="h580 bg-part">
                  <div class="visual-small-tit blue">服务质量KPI</div>
                  <div id="KPIPie" class="chart-box"></div>
                  <div class="bg-part2"></div>
                </div>
              </div>
            </div>
            <!-- <div class="visual-footer">Copyright © 2006-2015 深圳传世般若科技有限公司</div> -->
          </div>
        </div>
      </div>
      <div class="visual-footer visual-footer-swiper">Copyright © 2006-2015    深圳传世般若科技有限公司</div>
      <div class="swiper-pagination"></div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../src/js/echarts.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        city: "洛阳",
        barStyle: {
          grid: {
            top: '10%',
            left: '3%',
            right: '3%',
            bottom: '5%',
            containLabel: true
          },
          axisLine: {
            lineStyle: {
              width: 2,
              color: 'rgba(65, 207, 254, .15)',
            }
          },
          barWidth: window.screen.width > 1600 ? 30 : 20,
          lineColor: {
            lineStyle: {
              color: "rgba(65, 207, 254, .15)"
            }
          },
          GradientColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(106,210,253,1)'
            },
            {
              offset: 1,
              color: 'rgba(90, 99, 254, 1)'
            }
          ], false),
        },

        basicAbility: [
          {
            name: "上游委托企业(家)",
            number: 0,
            number2: ''
          },
          {
            name: "下游客户(万家)",
            number: 0,
            number2: ''
          },
          {
            name: "医药货量(件/年)",
            number: 0,
            number2: ''
          },
          {
            name: "运营车辆&冷藏车辆",
            number: 0,
            number2: 0
          },
          {
            name: "存储中心(家)",
            number: 0,
            number2: ''
          },
          {
            name: "配送终端(个)",
            number: 0,
            number2: ''
          },
          {
            name: "辐射省份&城市",
            number: 0,
            number2: 0
          }
        ],
        capacity: {
          OutOrderProcess: 0,
          InOrderProcess: 0,
          OutOrderCount: 0,
          InOrderCount: 0,
          OutWholeTotalPKGS: 0,
          InTotalPKGS: 0
        },
        pieStyle: {
          labelLine: {
            normal: {
              show: true,
              length: 25,
              length2: 85,
              lineStyle: {
                color: '#41cffe',
                type: 'dashed'
              }
            }
          },
          label: {
            normal: {
              show: true,
              formatter: '{a|{c}件}',
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 16,
                  lineHeight: 35
                }
              },
              borderWidth: 0,
              borderRadius: 4,
              padding: [0, -80],
              height: 70,
            }
          },
        },
        warehouseBar: {
          name: ["零库", "整库", "立库", "冷藏库", "冷冻库", "缓冲区", "中药库", "贵细库", "原料药库"],
          value: [12800, 4900, 240350, 5000, 474000, 105000, 67640, 0, 0], // 已用
          valuePercent: [80, 35, 95, 50, 79, 15, 76, 0, 0], // 百分比
          valueTotal: [16000, 14000, 253000, 10000, 6000, 700000, 89000, 30000, 16900] // 总量
        },
        overallUsePieData: [
          {value: 127998, name: "可存放件数"},
          {value: 132002, name: "已存放件数"}
        ],
        wareData: {
          name: ['第一季度', '第二季度', '第三季度', '第四季度'],
          value: [138900, 60000, 90000, 150000]
        },

        ProcessingOrderData: {
          name: ["待受理", "待调度", "待配送", "在途中", "待回单"],
          value: [16000, 14000, 53000, 10000, 70000]
        },
        InOutDynamicsData: {
          name: ["验收中", "上架中", "拣货中", "复核中"],
          value: [16000, 14000, 53000, 10000]
        },
        HuffConditionData: {
          name: ["发单量", "三方承运", "接单量", "自有承运"],
          fdl: [105, 100, 80, 50, 30, 40, 50, 70, 80, 70, 50, 30, 40, 50, 60, 70],
          sfcy: [65, 95, 90, 80, 70, 60, 50, 40, 30, 50, 80, 90, 100, 110, 90, 50],
          jdl: [40, 50, 60, 70, 80, 70, 60, 50, 40, 35, 30, 20, 10, 20, 30, 40],
          zycy: [20, 30, 40, 50, 60, 50, 40, 30, 20, 10, 30, 50, 70, 80, 90, 80]
        },
        ReturnOrderData: {
          month: ["9月", "10月", "11月"],
          valueTotal: [560, 603, 500],
          value: [500, 300, 350],
          valuePercent: [89, 49, 70]
        },
        DeliveryTimeData: [
          {name: "24小时内送达",value: 70},
          {name: "3日内送达",value: 15},
          {name: "5日内送达",value: 9},
          {name: "5日外送达",value: 6},
        ],
        WarehouseManageKPI: [
          {data: "准时送达率", value: 96},
          {data: "差错退回率", value: 3},
          {data: "包装完好率", value: 98},
          {data: "破损率", value: 2},
          {data: "货物提取准时率", value: 99},
          {data: "运输过程可追溯率", value: 98},
          {data: "客户投诉率", value: 1},
          {data: "冷链温控合格率", value: 97},
        ],
        tabsnumber: "1",
        allAbnormal: [],
        freezing: [],
        refrigeration: [],
        temperature: [],
        cool: [],
        order: [],
        device: [],
        interface: [],
        swiperLoaded: false
      },
      mounted() {
        this.getAllEcharts();
        this.getProcessingOrderBar();
        this.getDeliveryTimePie();
        this.getInOutDynamicsBar();
        this.getHuffConditionLine();
        this.getReturnOrderBar();
        this.getKPIPie();
        this.getTrunkData("1");

        this.getModel();

        this.$nextTick(() => {
          new Swiper(".fullScreen-swiper", {
            loop: false,
            direction: "horizontal",
            slidesPerView: 1,
            slidesPerGroup: 1,
            autoplay: {
              delay: 30000,
              disableOnInteraction: false
            },
            pagination: {
              el: '.swiper-pagination',
            },
          });
        });

      },
      methods: {
        getModel() {
          let self = this;
          axios.get('http://117.78.35.198:9001/Logistics/GetModel?tenantGuid=string')
            .then(function (res) {
              //01 开始绑定配送能力展示
              self.basicAbility[0].number = res.data.Distribution.UpCompany[0];
              self.basicAbility[1].number = res.data.Distribution.DownClient[0];
              //医药货量
              self.basicAbility[2].number = res.data.Distribution.Medicine[0];
              self.basicAbility[3].number = res.data.Distribution.Car[0]; //车
              self.basicAbility[3].number = res.data.Distribution.Car[1]; //冷藏车辆
              //存储中心
              self.basicAbility[4].number = res.data.Distribution.StoreCenter[0];
              //配送终端
              self.basicAbility[5].number = res.data.Distribution.Terminal[0];
              //辐射省份&城市
              self.basicAbility[6].number = res.data.Distribution.OverCitys[0];
              self.basicAbility[6].number2 = res.data.Distribution.OverCitys[1];

              //02 开始绑定 仓储能力展示
              self.capacity.OutOrderProcess = res.data.Store.OutOrderProcess;
              self.capacity.InOrderProcess = res.data.Store.InOrderProcess;
              self.capacity.OutOrderCount = res.data.Store.OutOrderCount;
              self.capacity.InOrderCount = res.data.Store.InOrderCount;
              self.capacity.OutWholeTotalPKGS = res.data.Store.OutWholeTotalPKGS;
              self.capacity.InTotalPKGS = res.data.Store.InTotalPKGS;

              //03 开始绑定库容
              self.wareData.value = [].concat(res.data.StoreCapacity.Capacity);
              self.getStockLine();

              //04 开始绑定仓库总体使用情况
              let StorePKG = self.overallUsePieData[0].value = res.data.StorePKG.Data;
              self.overallUsePieData = [];
              for (let item of StorePKG) {
                let d = {};
                for (let k in item) {
                  d["name"] = d[k];
                  d["value"] = item[k];
                }
                self.overallUsePieData.push(d);
              }
              self.getOverallUsePie();

              //05 开始绑定 仓库存储情况一览
              self.warehouseBar.name = [].concat(res.data.StoreCategory.Name);
              self.warehouseBar.value = [].concat(res.data.StoreCategory.Value); // 已用
              self.warehouseBar.valuePercent = [].concat(res.data.StoreCategory.ValuePercent); // 百分比
              self.warehouseBar.valueTotal = [].concat(res.data.StoreCategory.ValueTotal); // 总量
              self.getWarehouseBar();
            })
            .catch(function (error) {
              // handle error
              console.error(error);
            });

        },

        // 季度平均库容使用情况 stockLine
        getStockLine() {
          let stockLineChart = echarts.init(document.getElementById("stockLine"));
          let self = this;
          let valueTotal = self.wareData.value.reduce((x, y) => x + y);
          let stockLineOption = {
            grid: {
              top: '23%',
              left: '8%',
              right: '8%',
              bottom: '15%',
              containLabel: true,
            },
            legend: {
              data: ['总库容：' + (valueTotal / 10000).toFixed(2) + '万件'],
              top: 0,
              right: '20px',
              icon: 'circle',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                color: '#f9f9f9',
                borderColor: '#fff'
              },
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisTick: false,
              axisLine: this.barStyle.lineColor,
              axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                  color: '#d1e6eb',
                  margin: 15,
                },
              },
              data: self.wareData.name,
            }],
            yAxis: [{
              type: 'value',
              splitLine: false,
              axisTick: false,
              axisLine: false,
              axisLabel: false
            }],
            series: [{
              name: '总库容：' + (valueTotal / 10000).toFixed(2) + '万件',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: "#41cffe", // 线条颜色
                },
                borderColor: '#41cffe'
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                },
                formatter: x => {
                  return `${(x.value / 10000).toFixed(2)}万件/${(x.value/valueTotal).toFixed(2)}%`;
                }
              },
              itemStyle: {
                normal: {
                  color: "#41cffe",
                }
              },
              tooltip: {
                show: false
              },
              areaStyle: { //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(65,207,254,1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0, 0, 0, 0)'
                    }
                  ], false)
                }
              },
              data: self.wareData.value
            }]
          };
          stockLineChart.setOption(stockLineOption, true);
          this.stockLineChart = stockLineChart;
        },

        // 仓库总体使用情况 overallUsePie
        getOverallUsePie() {
          let overallUsePieChart = echarts.init(document.getElementById("overallUsePie"));
          let overallUsePieOption = {
            color: ["rgba(176, 212, 251, 1)"],
            title: {
              text: ((this.overallUsePieData[0].value / (this.overallUsePieData[0].value + this.overallUsePieData[
                1].value)) * 100).toFixed(2) + "%\n使用率",
              x: "center",
              y: "center",
              textStyle: {
                fontSize: window.screen.width > 1600 ? 24 : 18,
                color: "#fff",
                fontWeight: "normal",
                align: "center"
              }
            },
            legend: {
              show: true,
              itemGap: 20,
              x: "center",
              bottom: 10,
              textStyle: {
                fontSize: window.screen.width > 1600 ? 16 : 12,
                color: "#fff"
              },
              data: this.overallUsePieData.name,
            },
            series: [{
              name: "Line 1",
              type: "pie",
              startAngle: -120, //起始角度
              radius: ["50%", "66%"],
              labelLine: this.pieStyle.labelLine,
              label: this.pieStyle.label,
              data: [{
                  name: this.overallUsePieData[0].name,
                  value: this.overallUsePieData[0].value,
                  itemStyle: {
                    normal: {
                      color: '#ab85db'
                    }
                  },
                },
                {
                  name: this.overallUsePieData[1].name,
                  value: this.overallUsePieData[1].value,
                  itemStyle: {
                    normal: {
                      color: '#41cffe'
                    }
                  },
                }
              ]
            }]
          };
          overallUsePieChart.setOption(overallUsePieOption, true);
          this.overallUsePieChart = overallUsePieChart;
        },

        // 仓库存储情况一览 warehouseBar
        getWarehouseBar() {
          let warehouseBarChart = echarts.init(document.getElementById("warehouseBar"));
          let self = this;
          let barWidth = window.screen.width > 1600 ? 25 : 20,
            fontSize = window.screen.width > 1600 ? 14 : 12;
          let warehouseBarOption = {
            tooltip: {
              formatter: ((x) => {
                return `${x.name}<br>总容量：${(self.warehouseBar.valueTotal[x.dataIndex]/10000).toFixed(1)}万件<br>已用容量：${(self.warehouseBar.value[x.dataIndex]/10000).toFixed(1)}万件(${this.warehouseBar.valuePercent[x.dataIndex]}%)`
              })
            },
            grid: {
              top: "10%",
              left: "3%",
              right: "3%",
              bottom: "8%",
              containLabel: true
            },
            xAxis: {
              data: self.warehouseBar.name,
              axisTick: false,
              axisLine: self.barStyle.lineColor,
              axisLabel: {
                color: "#fff",
                formatter: x => {
                  return "{tc|" + self.getNewline(x, 5) + "}";
                },
                interval: 0,
                marginLeft: 0,
                rich: {
                  tc: {
                    align: "center"
                  }
                }
              }
            },
            yAxis: {
              nameGap: 8,
              splitLine: false,
              axisTick: false,
              nameTextStyle: {
                color: '#fff'
              },
              axisLabel: false,
              axisLine: false,
            },
            series: [{
                name: '已用容量',
                type: 'bar',
                barWidth: barWidth,
                itemStyle: {
                  normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(106,210,253,1)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(90,99,254, 1)'
                      }
                    ], false),
                    barBorderRadius: [barWidth / 2, barWidth / 2, 0, 0]
                  }
                },
                label: {
                  normal: {
                    show: true,
                    formatter: ((x) => {
                      if (x.value == 0) {
                        return ''
                      } else {
                        return `${(self.warehouseBar.value[x.dataIndex]/10000).toFixed(1)}/${self.warehouseBar.valuePercent[x.dataIndex]}%`;
                      }
                    }),
                    color: '#fff',
                    position: 'top',
                    offset: [-25, 25],
                    rotate: 45,
                    fontSize: 13
                  }
                },
                data: self.warehouseBar.valuePercent
              },
              {
                name: '总容量',
                type: 'bar',
                barWidth: barWidth,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    barBorderRadius: [barWidth / 2, barWidth / 2, 0, 0],
                    color: "rgba(255,255,255,0.1)",
                    borderWidth: 0
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    formatter: function (item) {
                      var val1 = (self.warehouseBar.valueTotal[item.dataIndex] / 10000).toFixed(1)
                      var val2 = '万件';
                      return '{minFont|' + val1 + '} {maxFont|' + val2 + '}';
                    },
                    rich: {
                      minFont: {
                        fontSize: window.screen.width > 1600 ? 13 : 11,
                        color: '#fff'
                      },
                      maxFont: {
                        fontSize: window.screen.width > 1600 ? 14 : 12,
                        color: '#fff'
                      }
                    },
                  }
                },
                data: [100, 100, 100, 100, 100, 100, 100, 100, 100]
              }
            ]
          };
          warehouseBarChart.setOption(warehouseBarOption, true);
          this.warehouseBarChart = warehouseBarChart;
        },


        // 处理中订单分部一览 ProcessingOrderBar
        getProcessingOrderBar() {
          let ProcessingOrderBarChart = echarts.init(document.getElementById('ProcessingOrderBar'));
          let ProcessingOrderBarOption = {
            tooltip: {
              formatter: (x) => {
                return `${x.name}：${(x.value/10000).toFixed(1)}万件`
              },
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: this.ProcessingOrderData.name,
            }],
            yAxis: [{
              type: 'value',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              splitLine: false,
              axisLabel: {
                color: '#fff'
              }
            }],
            series: [{
              type: 'bar',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: this.barStyle.GradientColor,
                },
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: (x) => {
                  return `${(x.value/10000).toFixed(1)}万件`
                },
              },
              data: this.ProcessingOrderData.value
            }]
          };
          ProcessingOrderBarChart.setOption(ProcessingOrderBarOption, true);
          this.ProcessingOrderBarChart = ProcessingOrderBarChart;
        },

        // 配送时长占比 DeliveryTimePie
        getDeliveryTimePie() {
          let DeliveryTimePieChart = echarts.init(document.getElementById('DeliveryTimePie'));
          let fontSize = window.screen.width > 1600 ? 18 : 14;
          let DeliveryTimePieOption = {
            color: ['#5383ec', '#67dbff', '#ab85db', '#afdee4'],
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              right: '5%',
              y: 'center',
              itemGap: 15,
              icon: 'rect',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                fontSize: fontSize,
                color: '#fff'
              },
              data: ['24小时内送达', '3日内送达', '5日内送达', '5日外送达']
            },
            series: [{
              name: '配送时长占比',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.DeliveryTimeData,
              labelLine: {
                lineStyle: {
                  color: '#41cffe',
                  type: 'dashed'
                }
              },
              label: {
                fontSize: fontSize,
                color: '#fff',
                formatter: x => {
                  return `${x.value}%`
                }
              }
            }]
          };
          DeliveryTimePieChart.setOption(DeliveryTimePieOption, true);
          this.DeliveryTimePieChart = DeliveryTimePieChart;
        },

        // 出入库动态一览 InOutDynamicsBar
        getInOutDynamicsBar() {
          let InOutDynamicsBarChart = echarts.init(document.getElementById('InOutDynamicsBar'));
          let InOutDynamicsBarOption = {
            tooltip: {
              formatter: (x) => {
                return `${x.name}：${(x.value/10000).toFixed(1)}万件`
              },
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: this.InOutDynamicsData.name,
            }],
            yAxis: [{
              type: 'value',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              splitLine: false,
              axisLabel: {
                color: '#fff'
              }
            }],
            series: [{
              type: 'bar',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: this.barStyle.GradientColor,
                },
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: (x) => {
                  return `${(x.value/10000).toFixed(1)}万件`
                },
              },
              data: this.InOutDynamicsData.value
            }]
          };
          InOutDynamicsBarChart.setOption(InOutDynamicsBarOption, true);
          this.InOutDynamicsBarChart = InOutDynamicsBarChart;
        },

        // 吞吐状况一览 HuffConditionLine
        getHuffConditionLine() {
          let HuffConditionLineChart = echarts.init(document.getElementById('HuffConditionLine'));
          let HuffConditionLineOption = {
            color: ['#5383ec', '#67dbff', '#ab85db', '#aedee4'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              right: '4%',
              itemGap: 15,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: {
                color: '#fff'
              },
              data: this.HuffConditionData.name,
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24', '26', '28',
                '30'
              ],
            }],
            yAxis: [{
              type: 'value',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              splitLine: false,
              axisLabel: {
                color: '#fff'
              }
            }],
            series: [{
              name: this.HuffConditionData.name[0],
              type: 'line',
              // symbol: 'none',
              // smooth: true,
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.fdl
            }, {
              name: this.HuffConditionData.name[1],
              type: 'line',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.sfcy
            }, {
              name: this.HuffConditionData.name[2],
              type: 'line',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.jdl
            }, {
              name: this.HuffConditionData.name[3],
              type: 'line',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                },
              },
              data: this.HuffConditionData.zycy
            }]
          };
          HuffConditionLineChart.setOption(HuffConditionLineOption, true);
          this.HuffConditionLineChart = HuffConditionLineChart;
        },

        // 回单情况 ReturnOrderBar
        getReturnOrderBar() {
          let ReturnOrderBarChart = echarts.init(document.getElementById('ReturnOrderBar'));
          let ReturnOrderBarOption = {
            tooltip: {
              formatter: (x) => {
                return `${x.name}：${(x.value/10000).toFixed(1)}万件`
              },
            },
            grid: this.barStyle.grid,
            xAxis: [{
              type: 'category',
              axisLine: this.barStyle.axisLine,
              axisTick: false,
              axisLabel: {
                color: '#fff'
              },
              data: this.ReturnOrderData.month,
            }],
            yAxis: [{
              type: 'value',
              axisLine: false,
              axisTick: false,
              splitLine: false,
              axisLabel: false,
            }],
            series: [{
              type: 'bar',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: this.barStyle.GradientColor,
                },
              },
              label: {
                show: true,
                position: 'top',
                offset: [-25, 25],
                rotate: 45,
                color: '#fff',
                formatter: (x) => {
                  return `${this.ReturnOrderData.value[x.dataIndex]}/${this.ReturnOrderData.valuePercent[x.dataIndex]}%`
                },
              },
              z: 2,
              data: this.ReturnOrderData.valuePercent
            }, {
              type: 'bar',
              barGap: '-100%',
              barWidth: this.barStyle.barWidth,
              itemStyle: {
                normal: {
                  barBorderRadius: [this.barStyle.barWidth / 2, this.barStyle.barWidth / 2, 0, 0],
                  color: '#1a2631',
                },
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: (x) => {
                  return `${this.ReturnOrderData.valueTotal[x.dataIndex]}单`
                },
              },
              z: 1,
              data: [100, 100, 100]
            }]
          };
          ReturnOrderBarChart.setOption(ReturnOrderBarOption, true);
          this.ReturnOrderBarChart = ReturnOrderBarChart;
        },

        // 服务质量KPI KPIPie
        getKPIPie() {
          let KPIPieChart = echarts.init(document.getElementById('KPIPie'));
          let labelShow = {
              normal: {
                show: true,
                position: "center",
                formatter: "{c}%",
                textStyle: {
                  fontSize: 14,
                  color: "#ffffff"
                },
                padding: [-8, 0, 0]
              }
            },
            labelHide = {
              normal: {
                color: "#190c24"
              }
            },
            radius = window.screen.width > 1600 ? [35, 50] : [25, 30];
          let KPIPieOption = {
            color: ['#5383ec', '#190c24'],
            series: []
          };
          this.WarehouseManageKPI.forEach((x, i) => {
            // let pos = i < 2 ? "10%" : i < 4 ? "35%" : i < 6 ? "60%" : "85%",
            // k = i % 2 == 0 ? 0 : 1;
            let pos = (10 + parseInt(i / 2) * 25) + "%",
              k = i % 2,
              serries = {
                type: "pie",
                startAngle: 360,
                center: [25 + k * 50 + "%", pos],
                radius: radius,
                x: "0%",
                hoverAnimation: false,
                data: [{
                    name: x.name,
                    value: 100 - x.value,
                    label: {
                      show: true,
                      formatter: function (item) {
                        return x.data;
                      },
                      color: "#fff",
                      fontSize: window.screen.width > 1600 ? 13 : 11,
                      padding: window.screen.width > 1600 ? [135, 0, 0] : [90, 0, 0],
                      position: "center"
                    },
                    labelLine: {
                      normal: {
                        show: false
                      },
                      emphasis: {
                        show: false
                      }
                    },
                    itemStyle: labelHide
                  },
                  {
                    name: x.name,
                    value: x.value,
                    label: labelShow,
                    labelLine: {
                      show: false
                    }
                  }
                ]
              };
            KPIPieOption.series.push(serries);
          });
          KPIPieChart.setOption(KPIPieOption, true);
          this.KPIPieChart = KPIPieChart;
        },

        getAllEcharts() {
          let self = this;
          window.onresize = function () {
            self.stockLineChart && self.stockLineChart.resize();
            self.warehouseBarChart && self.warehouseBarChart.resize();
            self.overallUsePieChart && self.overallUsePieChart.resize();

            self.ProcessingOrderBarChart && self.ProcessingOrderBarChart.resize();
            self.DeliveryTimePieChart && self.DeliveryTimePieChart.resize();
            self.InOutDynamicsBarChart && self.InOutDynamicsBarChart.resize();
            self.HuffConditionLineChart && self.HuffConditionLineChart.resize();
            self.ReturnOrderBarChart && self.ReturnOrderBarChart.resize();
            self.KPIPieChart && self.KPIPieChart.resize();
          };
        },

        //文字换行
        getNewline(val, count) {
          let s = val;
          if (s.length > count) {
            s = s.substring(0, count - 1) + "..";
          }
          return s;
        },

        // 异常信息明细
        getTrunkData(val) {
          const self = this;
          let routetype = val;
          self.tabsnumber = val;
          let pageindex = 1;
          let pagesize = 50;

          axios.get("src/json/abnormal.json").then(function (rs) {
            // console.log(rs, 1)
            self.allAbnormal = rs.data.allDatas;
            self.freezing = rs.data.freezingDatas;
            self.refrigeration = rs.data.refrigerationDatas;
            self.temperature = rs.data.temperatureDatas;
            self.cool = rs.data.coolDatas;
            self.order = rs.data.orderDatas;
            self.device = rs.data.deviceDatas;
            self.interface = rs.data.interfaceDatas;

            if (!self.swiperLoaded) {
              self.$nextTick(function () {
                new Swiper(".abnormal-swiper", {
                  loop: false,
                  slidesPerView: 4,
                  slidesPerGroup: 1,
                  autoplay: {
                    delay: 2500,
                    disableOnInteraction: false
                  },
                  direction: "vertical"
                });
              });
              self.swiperLoaded = true;
            }
          });
        },

        typeClass(type) {
          let className = "";

          switch (type) {
            case "冷冻仓异常":
              className = "typeClass1";
              break;
            case "冷藏仓异常":
              className = "typeClass2";
              break;
            case "在途温度异常":
              className = "typeClass3";
              break;
            case "阴凉异常":
              className = "typeClass4";
              break;
            case "订单异常":
              className = "typeClass5";
              break;
            case "设备异常":
              className = "typeClass6";
              break;
            case "接口异常":
              className = "typeClass7";
              break;
          }
          return className;
        },

      },
    })
  </script>
</body>

</html>